<template>
  <div class="app-container" style="width:100%;height:100%;">
    <div class="filter-container" style="margin-top:0px;padding-bottom: 0px;">
      <el-input v-model="queryPage.name" class="filter-item" placeholder="文档名称" style="width: 150px" clearable />
      <el-select v-model="queryPage.xiangmuId" class="filter-item" placeholder="项目" style="width: 150px" clearable @change="handChange">
        <el-option v-for="item in xmList" :key="item.id" :label="item.xiangmumingcheng" :value="item.id" />
      </el-select>
      <el-select v-model="queryPage.type" class="filter-item" placeholder="目录" style="width: 150px" clearable>
        <el-option v-for="item in ggTypes" :key="item.id" :label="item.typeName" :value="item.id" />
      </el-select>
      <el-button class="filter-item" icon="el-icon-search" type="primary" @click="search()">查询</el-button>
    </div>

    <el-table v-loading="listLoading" :data="userList" :height="tableHeight4" style="width: 100%; overflow:auto;" border>
      <el-table-column type="index" header-align="center" align="center" label="序号" width="80px" />
      <el-table-column header-align="center" align="left" label="操作" width="100px">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editFile(scope)">审批</el-button>
          <el-button type="text" size="small" @click="download(scope)">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="项目名称">
        <template slot-scope="scope">
          <span>{{ scope.row.xiangmuName }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="文档名">
        <template slot-scope="scope">
          <span v-if="!['png','jpeg','jpg','pdf','docx','doc'].includes(scope.row.suffix)">{{ scope.row.originalName }}</span>
          <span v-else-if="['png','jpeg','jpg','pdf','docx','doc'].includes(scope.row.suffix)">
            <a style="color:#2878ff" target="_blank" @click="yulan(scope)" v-html="scope.row.originalName" />
          </span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="目录" width="140px">
        <template slot-scope="scope">
          <span>{{ scope.row.xftName }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="审批状态" width="140px">
        <template slot-scope="scope">
          <span>{{ getDicName(scope.row.approvelState,'YW_APPROVAL_STATE') }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="创建人员" width="140px">
        <template slot-scope="scope">
          <span>{{ scope.row.createuserName }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="right" label="创建时间" width="180px">
        <template slot-scope="scope">
          {{ scope.row.createtimeTi }}
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>-1" :total="total" :page.sync="queryPage.page" :limit.sync="queryPage.limit" @pagination="loadList" />

    <el-dialog :visible.sync="editFileVisible" width="800px" append-to-body :title="'审批'">
      <edit-file v-if="editFileVisible" ref="editFile" :proid="code" :xiangmu="xiangmuId" :visible.sync="editFileVisible" />
    </el-dialog>

    <el-dialog :visible.sync="xmViewVisible" append-to-body width="640px" title="预览">
      <xm-view v-if="xmViewVisible" ref="xmView" :proid="code" :visible.sync="xmViewVisible" />
    </el-dialog>

    <el-dialog :visible.sync="viewPdfVisible" append-to-body width="1200px" title="预览">
      <view-pdf v-if="viewPdfVisible" ref="viewPdf" :proid="code" :visible.sync="viewPdfVisible" />
    </el-dialog>

  </div>
</template>

<script>
import { getXiangMuList } from '@/api/projectInfo'
import { getSPListPage, downloadFile } from '@/api/projectFile'
import { getAllLeafNode } from '@/api/projectCatalog'
import { getDictListByCode } from '@/api/dict'
import { tableHeight4 } from '@/utils/tableHeight'
import Pagination from '@/components/Pagination'

import EditFile from '../zlsp/uploadFile1' // eslint-disable-line no-unused-vars
import XmView from '../zlgl/viewPhoto' // eslint-disable-line no-unused-vars
import ViewPdf from '../zlgl/viewPdf'

export default {
  name: 'Zzjg',
  components: { Pagination, EditFile, XmView, ViewPdf },
  mixins: [tableHeight4],
  provide() {
    return {
      getList: this.loadList
    }
  },
  data() {
    return {
      total: 0,
      listLoading: false,
      userList: [],
      editFileVisible: false,
      xmViewVisible: false,
      viewPdfVisible: false,
      queryPage: {},
      code: '',
      xiangmuId: '',
      xmList: [],
      spTypes: [],
      ggTypes: []
    }
  },
  created() {
    this.loadList()
    this.getXiangMuList()
    this.getAllLeafNode()
    this.getDictEntry('YW_APPROVAL_STATE')
  },
  methods: {
    getDictEntry(code) {
      getDictListByCode(code).then(response => {
        if (code === 'YW_APPROVAL_STATE') {
          this.spTypes = response.data
        }
      })
    },
    getDicName(code, flag) {
      var dict = []
      if (flag === 'YW_APPROVAL_STATE') {
        dict = this.spTypes
        for (var i in dict) {
          if (dict[i].code === code) {
            return dict[i].name
          }
        }
      }
    },
    search() { // 查询
      this.loadList()
    },
    loadList() { // 加载列表
      this.userList = []
      this.listLoading = true

      getSPListPage(this.queryPage).then(response => {
        const { data } = response

        this.userList = data.records
        this.total = parseInt(data.total)

        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    getXiangMuList() { // 加载列表
      this.xmList = []

      getXiangMuList(this.queryPage).then(response => {
        this.xmList = response.data

        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    handChange(e) {
      if (e !== null && e !== '' && e !== 'null') {
        this.getAllLeafNode(e)
      }
    },
    getAllLeafNode(code) {
      getAllLeafNode({ xiangmuId: code }).then(response => {
        this.ggTypes = response.data
      }).catch(function() {
      })
    },
    yulan(scope) {
      if (['png', 'jpeg', 'jpg', 'PNG', 'JPEG', 'JPG'].includes(scope.row.suffix)) {
        this.xmViewVisible = true
        this.code = scope.row.id
        this.$nextTick(() => {
          this.$refs.xmView
        })
      } else if (['pdf', 'docx', 'doc', 'PDF', 'DOCX', 'DOC'].includes(scope.row.suffix)) {
        this.viewPdfVisible = true
        this.code = scope.row.id
        this.$nextTick(() => {
          this.$refs.viewPdf
        })
      }
    },
    editFile(scope) {
      this.editFileVisible = true
      this.code = scope.row.id
      this.xiangmuId = scope.row.xiangmuId
      this.$nextTick(() => {
        this.$refs.editFile
      })
    },
    download(scope) {
      const loading = this.$loading({
        lock: true,
        text: '下载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      downloadFile({ id: scope.row.id }).then(response => {
        var fileName = scope.row.originalName
        const contentDisposition = response.headers['content-disposition']
        if (contentDisposition) {
          fileName = window.decodeURI(response.headers['content-disposition'].split('=')[1], 'UTF-8')
        }
        const blob = new Blob([response.data], {
          type: `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` // word文档为msword,pdf文档为pdf
        })
        const objectUrl = URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = objectUrl
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
        // 释放内存
        window.URL.revokeObjectURL(link.href)
        loading.close()
      }).catch(response => {
        loading.close()
      })
    }
  }
}
</script>

<style scoped>

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
/* 右键会选中文字，为了美观将它禁用*/
#el-tree{
  user-select:none;
}
.menu1 {
  height: 40px;
  width: 120px;
  position: fixed;
  border: 1px solid #ccc;
  background-color: white;
  list-style: none;
  padding-left: 10px;
}
.menu2 {
  height: 100px;
  width: 120px;
  position: fixed;
  border: 1px solid #ccc;
  background-color: white;
  list-style: none;
  padding-left: 10px;
}
.menu_item {
  line-height: 20px;
  text-align: left;
  margin-top: 10px;
}

</style>
